<template>
  <header style="display: flex; margin-bottom: 0px">

    <a-modal
        v-model:visible="filePreviewVisible"
        title="Modal"
        ok-text="确认"
        cancel-text="取消"
        @ok="this.filePreviewVisible=false"
    >
      <file-preview :fileUrl="filePreviewUrl"></file-preview>
    </a-modal>



    <a-input-search
        v-model:value="keyword"
        placeholder="输入文件名"
        style="width: 500px;margin-left: 200px;margin-right: 100px"
        @search="onSearch"
    />

      <a-popover v-model:visible="addDirVisible" title="" trigger="click">
        <template #content >
          <div style="display: flex">
             <a-input ref="addDirNameRef" placeholder="请输入文件夹名称" />
             <a-button @click="addDir" type="primary">确认</a-button>
          </div>
        </template>
        <a-button type="primary">加文件夹</a-button>
      </a-popover>


      <a-upload  :file-list="fileList" :before-upload="beforeUpload">
        <a-button style="margin-left: 30px">
          <upload-outlined></upload-outlined>
            上传文件
        </a-button>
      </a-upload>
  </header>

  <a href="javascript:void(0);" @click="changeCurrentDir(0)">@</a>
  <a-breadcrumb>
    <template   v-for="(item,i) in currentDir">
      <a-breadcrumb-item><a href="javascript:void(0);" @click="changeCurrentDir(item,i)">{{item}}</a></a-breadcrumb-item>
    </template>
  </a-breadcrumb>

  <a-table
      :columns="columns"
      :row-key="record => record.id"
      :data-source="dataSource"
      :pagination="pagination"
      @change="handleTableChange"
  >
    <template #f="{ text,record }">
      <div @dblclick="fileClick(record)">
        <img class="file_icon" :src="getFileTypeImg(record.f,record.n,record.p)"/> &nbsp;
        <span> {{record["n"]}}</span>
      </div>
    </template>
    <template #action="{ record }">
      <span>
        <template v-if="record.f==1">
           <a  @click="previewFile(record)" >预览</a>
           <a-divider type="vertical" />
           <a target="_blank" :href="'/t_file/preview?isDownLoad=true&p='+record.p">下载</a>
           <a-divider type="vertical" />
        </template>
         <a @click="deleteFile">删除</a>
      </span>
    </template>
  </a-table>
</template>
<script>

import { defineComponent } from 'vue';
import FilePreview from "./components/FilePreview.vue"

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    width: '8%',
  },
  {
    title: 'f',
    dataIndex: 'f',
    sorter: true,
    width: '20%',
    filters: [
      {
        text: '目录',
        value: '0',
      },
      {
        text: '文件',
        value: '1',
      },
    ],
    slots: {
      customRender: 'f',
    }
  },
  {
    sorter: true,
    title: 't',
    dataIndex: 't',
    width: '20%',
  },
  {
    title: '大小',
    dataIndex: 's',
    width: '20%',
    sorter: true,
    customRender: ({text, record}) => {
    //  alert(text)
       let hs= M.common.humanFileCapacity(record.s)
       return hs;
    }
  },
  {
    title: '操作',
    key: 'action',
    slots: {
      customRender: 'action',
    },
  },
];


export default defineComponent({
  components:{
     "file-preview":FilePreview
  },
  data(){
     return {
       filePreviewVisible:false,
       filePreviewUrl:"",
       addDirVisible:false,
       fileList:[],
       curD:"/",
       order:"id desc",
       dataSource:[],
       total:0,
       columns:columns,
       current:1,
       pageSize:10,
       f:"",
       keyword:""
     }
  },

  methods:{
    async previewFile(record){
      if(record.p.endsWith("jpg")||record.p.endsWith("png")){
        this.filePreviewUrl="/t_file/preview?p="+record.p;
        this.filePreviewVisible=true;
      }else {
         window.open("/t_file/preview?p="+record.p.toLowerCase())
      }
    },
    async addDir(){
      //M.r=this.$refs
      let n=this.$refs.addDirNameRef.stateValue;
      let pdir=this.curD;
      if(this.curD.endsWith("/")){
         pdir=""
      }
      let r=await MIO.addDir({
          d:this.curD,
          n:n,
          f:0,
          p:pdir+"/"+n
      });
      if(r.code!=0){
        antd.message.warning(r.msg)
      }else {
        this.fetch()
      }
    },
    async beforeUpload(file){
      const formData = new FormData();
      formData.append("dir",this.curD);
      formData.append(file,file);
      let r=await MIO.upload(formData);
      this.fetch();
    },

    deleteFile(){
      alert("暂时不能删")
    },
    onSearch(v){
      this.fetch();
    },
    fileClick(record){
      if(record.f==0){
        this.curD=record.p;
        this.fetch();
      }
    },
    changeCurrentDir(item,i){
      let d="";
      if(item!=0){
        for (let j=1;j<=i;j++){
          d=d+ "/"+this.currentDir[i]
        }
      }else {
        d="/"
      }
      this.curD=d;
      this.fetch();
    },
    handleTableChange(page, filters, sorter){
     // console.log("====>",filters)
      if(filters){
          if(filters.f && filters.f.length==1){
              this.f=filters.f[0];
          }else {
            this.f=null;
          }
      }
      if(sorter){
        let orderField=sorter.field;
        let orderType=sorter.order;
        if(orderType && orderType.startsWith("asc")){
          orderType="asc";
        }else {
          orderType="desc";
        }
        this.order=orderField+" "+orderType;
      }
      this.current=page.current;
      this.pageSize=page.pageSize;
      this.fetch();
    },
    async fetch(){
      let r= await MIO.fileList({
        page:this.current ,
        num:this.pageSize,
        d:this.curD,
        f:this.f,
        order:this.order,
        keyword:this.keyword
      });
      this.dataSource=r.data.rows;
      this.total=r.data.total;
    },
    getFileTypeImg(f,n,p){
      if(f==0){
        return this.$common.getFileTypeImg("dir");
      }else if(f==1){
          if(n.endsWith("png")||n.endsWith("jpg")){
            return "/t_file/preview?p="+p;
          }
      }
      let file_suffix =n.split('.').pop().toLowerCase();
      return this.$common.getFileTypeImg(file_suffix);
    }
  },
  computed:{
    pagination(){
      return {
        total:this.total,
        current: this.current,
        pageSize:this.pageSize,
        order:this.order
      }
    },
    currentDir(){
        let r=  this.curD.split("/");
        return r;
    }
  },
  async mounted(){
    this.fetch();
    M.t=this
  }

});
</script>


<style>
.file_icon{
  width: 20px;
}
</style>
